<template>
<div>
  
  <button @click="comp = 'News'">新闻</button>
  <button @click="comp = 'Music'">音乐</button>
   <button @click="comp = 'Game'">游戏</button>

    <!-- 
      如何监听已经被keep-alive缓存的组件失活和激活????使用两个生命周期函数
        - activated:被 keep-alive 缓存的组件激活时调用
        - deactivated:被 keep-alive 缓存的组件失活时调用
     -->
    <keep-alive>
     <component :is="comp"></component>
   </keep-alive> 

</div>
</template>


<script>
import News from "./componeents/News"
import Music from "./componeents/Music"
import Game from "./componeents/Game"


export default {
  name:"App",
  components:{
    News,
    Music,
    Game,
  },
  data() {
    return {
      comp:"",
    }
  },

}
</script>

<style>

</style>